import React from 'react';
import {
  View,
  Text,
  TextInput,
  Button,
  TouchableOpacity,
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import dismissKeyboard from 'dismissKeyboard';

export default class HeartSecretMsgPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.trueName = "";
    this.state.tel = "";
    this.state.email = "";
    this.state.company = "";
    this.state.msg = "";
    this.state.hasVerified = false;

    this._width = SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(54 * 4);

    this.trueNameChange = function(text) {
        this.setState({
            trueName: text,
        });
    }

    this.telChange = function(text){
      this.setState({
          tel: text,
      });
    }

    this.emailChange = function(text){
      this.setState({
          email: text,
      });
    }

    this.companyChange = function(text){
      this.setState({
          company: text,
      });
    }
  }

  render() {
    return(
      <View style={{borderColor:"#cccccc",
      borderBottomWidth:SizeUtils.translateFontSizeToCode(3),}}>
        <TouchableOpacity style={{paddingTop:Config.paddingTop,
            backgroundColor:"#eeeeee",

            paddingLeft:SizeUtils.translateDesignWidthToCode(54),
            paddingRight:SizeUtils.translateDesignWidthToCode(54),
            height:SizeUtils.translateDesignHeightToCode(1260),
           flexDirection:"column", alignItems:"center",
            }} onPress={() => dismissKeyboard()}
            activeOpacity={1}>

          {this._renderInputTextItem("您的姓名：",this.state.trueName , this.trueNameChange)}
          {this._renderInputTextItem("联系方式：",this.state.tel , this.telChange)}
          {this._renderInputTextItem("Email邮箱：",this.state.email , this.emailChange)}
          {this._renderInputTextItem("所在单位：",this.state.company , this.companyChange)}
          {this._renderMsgInput()}
          {this._renderNavigationBar()}
        </TouchableOpacity>
      </View>
    )
  }

  _dealLeavePage() {
    this.setState(
      {
        trueName:"",
        tel:"",
        email:"",
        company:"",
        msg:""
      }
    )
  }

  _renderMsgInput(){
    return(
      <View style={{
            flexDirection:"column",justifyContent:"flex-start",alignItems:"flex-start",
            height:SizeUtils.translateDesignHeightToCode(120),
            width:SizeUtils.translateDesignWidthToCode(690),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(0),
            borderColor:"#cccccc", paddingTop:SizeUtils.translateDesignHeightToCode(40),
          }}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>留言内容：</Text>
          <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(30)}}>
            <TextInput
              style={{
                width:this._width + SizeUtils.translateDesignWidthToCode(160),
                borderWidth: SizeUtils.translateFontSizeToCode(3),borderColor:"#cccccc",
                backgroundColor:"#ffffff",
                height:SizeUtils.translateDesignHeightToCode(510),
                textAlignVertical: "center",
                fontSize:SizeUtils.translateFontSizeToCode(32),}}
              onChangeText = {(msg) => this.setState({msg})}
              placeholder = ""
              multiline = {true}
              value = {this.state.msg}
              editable = {this.state.hasVerified == false}
            />
          </View>
          <View style={{
            paddingTop:SizeUtils.translateDesignHeightToCode(50),
          }}>
            <TouchableOpacity
              style={{width:SizeUtils.translateDesignWidthToCode(700),
                height:SizeUtils.translateDesignWidthToCode(100),
                alignItems:"center",
                justifyContent:"center",
                backgroundColor:"#ffffff",
              }}
            >
              <Text>提交信息</Text>
            </TouchableOpacity>
          </View>
      </View>
    )
  }

  _renderInputTextItem(title, stateValue, changeFun) {
    return (
      <View style={{
            flexDirection:"row",justifyContent:"space-between",alignItems:"center",
            height:SizeUtils.translateDesignHeightToCode(120),
            borderBottomWidth:SizeUtils.translateFontSizeToCode(3),
            borderColor:"#cccccc",
          }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>{title}</Text>
        <TextInput
          style={{
            width:this._width,
            borderWidth: 0,
            textAlignVertical: "center",
            fontSize:SizeUtils.translateFontSizeToCode(32),}}
          onChangeText = {changeFun.bind(this)}
          placeholder = ""
          multiline = {false}
          maxLength = {30}
          value = {stateValue}
          editable = {this.state.hasVerified == false}
        />
      </View>
    )
  }

}
